﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <script src="../Scripts/lodash.min.js"></script>
  <title>MES人员配置报表</title>
  <style>
    /* 穿梭框宽度设置 */
    .el-transfer-panel {
      width: 334px;
    }

    .el-dialog__body {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .el-transfer-panel__body {
      height: 350px !important;
    }

    .el-transfer-panel__list {
      height: 300px !important;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak v-on:keyup.enter="getData">
    <!-- 报表标题 -->
    <vue2-report-header :title="'MES人员配置报表'"></vue2-report-header>
    <div style="padding: 10px;">
      <!-- 查询条件区 -->
      <el-form :inline="true" :model="queryInfo" ref="queryInfoRef" style="margin: 10px" :label-position="'left'"
        :disabled="!isLegel">
        <el-form-item label="员工号:">
          <el-autocomplete v-model.trim="queryInfo.employeename" placeholder="请输入员工号" :trigger-on-focus="false"
            :fetch-suggestions="searchEmployeenameAsync" :value-key="'employeename'" :debounce="500"
            style="width: 160px;">
          </el-autocomplete>
        </el-form-item>

        <el-form-item label="姓名:">
          <el-autocomplete v-model.trim="queryInfo.fullname" placeholder="请输入姓名" :trigger-on-focus="false"
            :fetch-suggestions="searchFullnameAsync" :value-key="'fullname'" :debounce="500" style="width: 160px;">
          </el-autocomplete>
        </el-form-item>

        <el-form-item label="组织结构:" prop="selectOrg">
          <el-cascader :options="orginazition" :props="{ checkStrictly: true}" ref="orginazitionRef" filterable
            v-model="queryInfo.selectOrg" clearable style="width:400px;">
          </el-cascader>
        </el-form-item>

        <el-form-item label="角色:">
          <el-select v-model="queryInfo.rolename" placeholder="请选择角色" clearable filterable style="width: 180px;">
            <el-option v-for="w in roleList" :key="w.rolename" :label="w.rolename" :value="w.rolename">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="菜单:">
          <el-autocomplete v-model.trim="queryInfo.menuname" placeholder="请输入菜单" :trigger-on-focus="false"
            :fetch-suggestions="searchMenuDefinitionNameAsync" :value-key="'menudefinitionname'" :debounce="500">
          </el-autocomplete>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getData">查询</el-button>
          <el-button type="success" icon="el-icon-circle-plus-outline" size="small" @click="openBatchAddDialog">批量添加
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table v-loading="loading" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中"
        element-loading-background="rgba(0,0,0,0.8)" :data="dataList" stripe border
        @selection-change="handlerSelectionChange">
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="增加移除报表" width="130">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <template #content>添加报表</template>
              <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini"
                @click="showEditDialog(scope.row)">
              </el-button>
            </el-tooltip>
            <el-tooltip placement="top">
              <template #content>移除报表</template>
              <el-button type="danger" icon="el-icon-remove-outline" size="mini" @click="showDeleteDialog(scope.row)">
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="员工号" prop="employeename" width="120"></el-table-column>
        <el-table-column label="姓名" prop="fullname" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column label="头像" width="70">
          <template slot-scope="scope">
            <div v-if="scope.row.userimageurl">
              <el-image style="width:48px;height: 48px;" :src="scope.row.userimageurl"
                :preview-src-list="[scope.row.userimageurl]">
              </el-image>
            </div>
            <div v-else>
              <el-image style="width:48px;height: 48px;" :src="'../images/person_blue.png'"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="卡号" prop="cardnum" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="员工id" prop="employeeid" width="150" v-if="!columnIsHidden"></el-table-column>
        <el-table-column label="密码" prop="password" v-if="!columnIsHidden" width="140" show-overflow-tooltip>
          <template #header>
            <span>密码</span>
            <el-tooltip placement="top">
              <template #content>此列显示的为解密后的密码，且只有特定用户在特定IP地址访问时才显示</template>
              <i class="el-icon-info"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="组织结构" prop="orginfo" width="400" show-overflow-tooltip></el-table-column>
        <el-table-column label="菜单" prop="menudefinitionname" width="140" show-overflow-tooltip></el-table-column>
        <el-table-column label="角色" prop="rolenames" show-overflow-tooltip></el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage" :page-sizes="[10,20,50]" :page-size="queryInfo.pageSize"
        layout="prev,pager,next,jumper,sizes,total" :total="total" :disabled="!isLegel">
      </el-pagination>

      <!-- 回到顶部 -->
      <el-backtop></el-backtop>

      <!-- 添加报表 弹出框 -->
      <el-dialog title="人员添加报表" :visible.sync="editDialogVisible" width="60%" @close="editDialogClose" height="800">
        <!-- 表单 -->
        <el-form :model="editForm" ref="editFormRef" :inline="true" :label-position="'top'" lable-width="100px">
          <el-form-item label="员工号">
            <el-input v-model="editForm.employeename" disabled></el-input>
          </el-form-item>

          <el-form-item label="姓名">
            <el-input v-model="editForm.fullname" disabled></el-input>
          </el-form-item>

          <el-form-item label="分厂">
            <el-input v-model="editForm.factoryname" disabled></el-input>
          </el-form-item>

          <el-form-item label="工区">
            <el-input v-model="editForm.workcentername" disabled></el-input>
          </el-form-item>
        </el-form>

        <!-- 穿梭框 -->
        <el-transfer filterable filter-placeholder="请输入报表名称" v-model="willBeAddedPages" :data="pageList"
          :titles="['未选', '已选']" :props="{key: 'pageid',label: 'pagename'}" width="100%">
        </el-transfer>

        <!-- 弹出窗底下按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="addPage" size="small" :loading="addButtonLoading">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 移除报表 弹出框 -->
      <el-dialog title="人员移除报表" :visible.sync="deleteDialogVisible" width="60%" @close="deleteDialogClose">
        <!-- 表单 -->
        <el-form :model="deleteForm" ref="deleteFormRef" :inline="true" :label-position="'top'" lable-width="100px">
          <el-form-item label="员工号">
            <el-input v-model="deleteForm.employeename" disabled></el-input>
          </el-form-item>

          <el-form-item label="姓名">
            <el-input v-model="deleteForm.fullname" disabled></el-input>
          </el-form-item>

          <el-form-item label="分厂">
            <el-input v-model="deleteForm.factoryname" disabled></el-input>
          </el-form-item>

          <el-form-item label="工区">
            <el-input v-model="deleteForm.workcentername" disabled></el-input>
          </el-form-item>
        </el-form>

        <!-- 穿梭框 -->
        <el-transfer filterable filter-placeholder="请输入报表名称" v-model="willBeDeletedPages" :data="employeePages"
          :titles="['未选', '已选']" :props="{key: 'pageid',label: 'pagename'}" width="100%">
        </el-transfer>

        <!-- 弹出窗底下按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteDialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="deletePage" size="small" :loading="deleteButtonLoading">确 定
          </el-button>
        </span>
      </el-dialog>

      <!-- 批量添加弹出框 -->
      <el-dialog title="人员批量添加报表" :visible.sync="batchAddDialogVisible" width="60%" @close="batchAddDialogClose"
        height="800">
        <!-- 穿梭框 -->
        <el-transfer filterable filter-placeholder="请输入报表名称" v-model="willBeBacthAddedPages" :data="allPagesList"
          :titles="['未选', '已选']" :props="{key: 'pageid',label: 'pagename'}" width="100%">
        </el-transfer>

        <!-- 弹出窗底下按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="batchAddDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="bacthAddPage" size="small" :loading="batchAddLoading">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
  <script type="module">
    import { getParams, fetchSuggestion, getUserWhiteList } from '../Scripts/hooks/useCommonMethod.js'
    import { getMESOrginazition, getMESZSOrginazition } from '../Scripts/hooks/fetchAPI.js'
    import Vue2ReportHeader from '../Scripts/components/Vue2ReportHeader.js'
    const app = new Vue({
      el: '#app',
      components: { Vue2ReportHeader },
      data: {
        loading: false,
        total: 0,
        roleList: [],// 角色
        employeeid: '',
        queryInfo: {
          employeename: '',
          fullname: '',
          selectOrg: [],// 组织结构
          rolename: '',
          menuname: '',
          currentPage: 1,//当前页
          pageSize: 10//每页显示条数
        },
        isLegel: true,
        dataList: [],//人员信息
        editDialogVisible: false,//添加报表对话框默认隐藏
        addButtonLoading: false,
        deleteDialogVisible: false,//移除报表对话框默认隐藏
        deleteButtonLoading: false,
        batchAddDialogVisible: false,//批量添加对话框默认隐藏
        batchAddLoading: false,
        editForm: {},//配置 对话框里的表单
        willBeAddedPages: [],//将要被添加的报表列表
        pageList: [],//已维护所有的报表
        deleteForm: {},// 移除 对话框里的表单
        willBeDeletedPages: [],//将要被移除的报表列表
        employeePages: [],//该用户已经配置的报表
        columnIsHidden: true, //列是否隐藏
        multipleSelection: [], // 所选人员列表
        willBeBacthAddedPages: [],// 将要被批量添加的报表页面
        allPagesList: [], // 所有报表页面
        superAdminList: [],//信息中心管理员
        orginazition: [],
        menuList: []
      },
      methods: {
        // 查询用户姓名
        searchFullnameAsync(value, callback) {
          fetchSuggestion({ actionName: 'getEmployeeAsync', name: 'fullname', value, callback, triggerLength: 1 });
        },
        // 查询员工号
        searchEmployeenameAsync(value, callback) {
          fetchSuggestion({ actionName: 'getEmployeeAsync', name: 'employeename', value, callback, triggerLength: 1 });
        },
        // 查询菜单项
        searchMenuDefinitionNameAsync(value, callback) {
          fetchSuggestion({ actionName: 'getMenuDefinitionNameAsync', name: 'menudefinitionname', value, callback, triggerLength: 1 });
        },
        // 查询数据
        async getData() {
          this.loading = true;
          const { data: { data, meta, total } } = await axios.post('../handler/report/EmployeeReportPageMaint.ashx?action=getData', {
            ...this.queryInfo,
            type: 'getEmployeeInfo'
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          for (const i of data) {
            const { factoryname, workcentername, shiftname, teamname } = i;
            let orginfo = '';
            if (factoryname) {
              orginfo += `${factoryname}`;
            }
            if (workcentername) {
              orginfo += ` / ${workcentername}`;
            }
            if (shiftname) {
              orginfo += ` / ${shiftname}`;
            }
            if (teamname) {
              orginfo += ` / ${teamname}`;
            }
            i.orginfo = orginfo;
          }
          this.dataList = data;
          this.total = total;
        },
        // 打开添加对话框
        async showEditDialog(row) {
          this.editDialogVisible = true;
          this.editForm = row;

          const { data: { data, meta, total } } = await axios.post('../handler/report/EmployeeReportPageMaint.ashx?action=getPageList', {
            employeeid: row.employeeid,
            type: 'getPageList'
          })

          if (meta.status === 500) { return this.$message.error(meta.msg); }

          this.pageList = data.map((item) => {
            return { pageid: item.pageid, pagename: item.pagename, disabled: item.disabled === 'true' };
          })
        },
        // 查询角色列表
        async getRoleList() {
          const { data: { data, meta, total } } = await axios.post('../handler/report/CommonHandler.ashx?action=getRoleList', { type: 'getRoleList' });
          this.roleList = data;
        },
        // 打开移除报表对话框
        async showDeleteDialog(row) {
          this.deleteDialogVisible = true;
          this.deleteForm = row;

          const { data: { data, meta, total } } = await axios.post('../handler/report/EmployeeReportPageMaint.ashx?action=getEmployeePages', {
            employeeid: row.employeeid,
            type: 'getEmployeePages'
          })

          if (meta.status !== 200) { return this.$message.error('数据请求失败'); }

          this.employeePages = data.map((item) => {
            return { pageid: item.pageid, pagename: item.pagename, disabled: item.disabled === 'true' };
          })
        },
        // 添加报表对话框关闭后
        editDialogClose() {
          this.addButtonLoading = false;
          this.willBeAddedPages = [];
        },
        // 移除报表对话框关闭后
        deleteDialogClose() {
          this.deleteButtonLoading = false;
          this.willBeDeletedPages = [];
        },
        // 批量添加对话框关闭后
        batchAddDialogClose() {
          this.batchAddLoading = false;
          this.willBeBacthAddedPages = [];
        },
        // 添加报表
        async addPage() {
          if (this.willBeAddedPages.length === 0) {
            return this.$message.error('请选择待添加的报表');
          }
          this.addButtonLoading = true;//防止重复点击
          const { data: { data, meta, total } } = await axios.post('../handler/report/EmployeeReportPageMaint.ashx?action=addPage', {
            pageList: this.willBeAddedPages,
            employeeid: this.editForm.employeeid,
            type: 'addPage'
          })
          if (meta.status == 200) {
            this.$message.success('添加成功!');
          } else {
            this.$message.error('添加失败!');
          }

          this.willBeAddedPages = [];
          this.editDialogVisible = false;
          this.addButtonLoading = false;
        },
        // 移除报表
        async deletePage() {
          if (this.willBeDeletedPages.length === 0) {
            return this.$message.error('请选择待移除的报表!');
          }
          // 更新启用状态前确认
          const confirmResult = await this.$confirm('即将移除已选择的报表，该操作不可撤销，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)

          // 取消切换
          if (confirmResult !== 'confirm') {
            return this.$message.info('已取消移除');
          }
          this.deleteButtonLoading = true;//防止重复点击
          const { data: { data, meta, total } } = await axios.post('../handler/report/EmployeeReportPageMaint.ashx?action=deletePage', {
            pageList: this.willBeDeletedPages,
            employeeid: this.deleteForm.employeeid,
            type: 'deletePage'
          })

          if (meta.status == 200) {
            this.$message.success('移除成功');
          } else {
            this.$message.error('移除失败!');
          }

          this.willBeDeletedPages = [];
          this.deleteDialogVisible = false;
          this.deleteButtonLoading = false;
        },
        // 打开批量添加对话框
        async openBatchAddDialog() {
          if (this.superAdminList.length === 0) { return this.$message.error('当前用户非信息中心管理员，不能批量添加'); }
          if (this.multipleSelection.length === 0) { return this.$message.error('请选择待添加的人员'); }
          this.batchAddDialogVisible = true;
          this.loading = true;
          const { data: { data, meta, total } } = await axios.post('../handler/report/EmployeeReportPageMaint.ashx?action=getPageList', { type: 'getAllPage' });
          this.loading = false;
          if (meta.status !== 200) {
            return this.$message.error('数据请求失败');
          }
          this.allPagesList = data;
        },
        // 批量添加
        async bacthAddPage() {
          const selectedPersonsCount = this.multipleSelection.length;
          const selectedPagesCount = this.willBeBacthAddedPages.length;
          if (selectedPagesCount === 0) { return this.$message.error('请至少选择一条待批量添加的数据'); }

          // 批量更新前确认
          const confirmResult = await this.$confirm(`确认要给所选${selectedPersonsCount}人批量添加所选${selectedPagesCount}个报表/看板吗？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)

          // 取消切换
          if (confirmResult !== 'confirm') {
            return this.$message.info('已取消批量添加');
          }
          this.batchAddLoading = true;//防止重复点击
          this.loading = true;
          const { data: { data, meta, total } } = await axios.post('../handler/report/EmployeeReportPageMaint.ashx?action=batchAddPages', {
            type: 'batchAddPages',
            pageList: this.willBeBacthAddedPages,
            // lodash 数组去重(所选人员)
            personList: _.uniqBy(this.multipleSelection, 'employeeid')
          });
          this.loading = false;
          this.batchAddLoading = false;
          if (meta.status !== 200) {
            return this.$message.error('数据请求失败');
          }
          this.$message.success('批量添加成功');
          this.batchAddDialogVisible = false;
        },
        // 表格选择事件
        handlerSelectionChange(val) {
          this.multipleSelection = [];
          val.forEach(item => this.multipleSelection.push({ employeeid: item.employeeid }));
        },
        // 监听 页码值 改变的事件
        handleCurrentChange(newPage) {
          this.queryInfo.currentPage = newPage;
          this.getData();
        },
        // 监听 pagesize 改变的事件
        handleSizeChange(newSize) {
          this.queryInfo.pageSize = newSize;
          this.getData();
        }
      },
      async mounted() {
        if (!getParams("uid")) {
          this.isLegel = false;
          return this.$notify.error({ title: '错误', message: '缺少必要参数!', duration: 0 });
        }

        const otherOrginazition = await getMESOrginazition();
        const zsOrginazition = await getMESZSOrginazition({ factoryCode: '603' });
        this.orginazition = [...otherOrginazition, ...zsOrginazition];

        this.employeeid = getParams("uid");
        const { data: superAdmin } = await axios.post('../handler/report/CommonActionHandle.ashx?action=isSuperAdmin', {
          type: 'isSuperAdmin',
          employeeid: getParams("uid")
        });

        const { data: isInAllowedIp } = await axios.post('../handler/report/CommonActionHandle.ashx?action=isInAllowedIp', { type: 'isInAllowedIp' });

        if (superAdmin.total > 0 && isInAllowedIp.data) {
          // 显示：用户id、密码
          this.columnIsHidden = false;
          this.superAdminList = superAdmin.data;
        }

        const pageurl = window.location.pathname.split('/')[3];
        const whiteList = await getUserWhiteList(pageurl, this.$message);

        if (whiteList.indexOf(this.employeeid) == -1) {
          this.isLegel = false;
          return this.$notify.error({ title: '错误', message: '该用户无权使用该功能!' });
        }
        this.getRoleList();
      },
      watch: {
        queryInfo: { handler() { this.queryInfo.currentPage = 1 }, deep: true }
      }
    })
  </script>
</body>

</html>